<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航栏手风琴效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .d-flex {
        margin-left: 12px;
        margin-top: 12px;
        display: flex;
      }
      .d-flex .slider_menu {
        position: relative;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50px;
        border: 3px solid transparent;
        overflow: hidden;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      .d-flex .nav-pills {
        display: flex;
        position: relative;
      }
      .d-flex .anchor {
        background: #f1404b;
        border-radius: 100px;
        position: absolute;
        width: 58px;
        height: 28px;
        left: 0px;
        opacity: 1;
        -webkit-transition: 0.35s;
        transition: 0.35s;
      }
      .d-flex .pageTitle {
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        padding: 0 12px;
        z-index: 99;
        color: #888;
      }
      .d-flex .anchorActive {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="d-flex">
      <div class="slider_menu">
        <ul id="nav-pills" class="nav-pills">
          <li class="anchor"></li>
          <li class="pageTitle anchorActive">全部</li>
          <li class="pageTitle">示例1</li>
          <li class="pageTitle">示例2</li>
          <li class="pageTitle">示例3.0</li>
        </ul>
      </div>
    </div>
    <script>
      let ulList = document.getElementById("nav-pills");
      let ul_li = ulList.getElementsByTagName("li");
      //   中间变量
      let navList = {
        active: 1,
        navWidth: 50,
        navLeft: 0,
      };
      for (let i = 0; i < ul_li.length; i++) {
        ul_li[i].index = i;
        let that = this;
        ul_li[i].onmouseover = function () {
          that.setli(ul_li, this.index, this.offsetWidth, this.offsetLeft);
        };
        ul_li[i].onclick = function () {
          // 保存点击后元素状态
          navList.active = this.index;
          navList.navWidth = this.offsetWidth;
          navList.navLeft = this.offsetLeft;
        };
      }
      ulList.onmouseout = () => {
        this.setli(ul_li, navList.active, navList.navWidth, navList.navLeft);
      };
      function setli(ul_li, active, navWidth, navLeft) {
        // offsetWidth 自身宽度 offsetLeft 与已定位父元素左侧距离 `` es6模板字符串
        ul_li[0].style = `position: absolute; width: ${navWidth}px; height: 28px; left: ${navLeft}px; opacity: 1;`;
        ul_li[active].classList.add("anchorActive");
        // 除去当前元素，其他兄弟元素状态清空 俗称：排他思想
        for (let j = 0; j < ul_li.length; j++) {
          if (j != active) {
            ul_li[j].classList.remove("anchorActive");
          }
        }
      }
    </script>
  </body>
</html>
